<template>
	<view class="withdraw-history">
		<view class="top-total u-flex">
			<view class="u-flex-1">
				<view class="">当前总金豆数</view>
				<view class="num">{{count}}</view>
			</view>
			<u-button type="primary" shape="circle" @click="toInfo('/pages/line/my/goldenBeanChange')">立即划转</u-button>
		</view>
		<view class="list">
			<view class="list-item"v-for="(item, index) in tableData" :key="index">
				<image v-if="item.type == 1" class="l-i-img" src="@/static/my/arrow-top.png" mode=""></image>
				<image v-else class="l-i-img" src="@/static/my/arrow-down.png" mode=""></image>
				<view class="l-i-name">
					最新金豆数：{{item.newGoldenBeans}}
				</view>
				<view >
					<u-tag :text="'变更前金豆数：' + item.lastGoldenBeans" color="#FFA800" border-color="#FFA800" bg-color="#FFFFFF" size="mini" mode="plain" />
					<u-tag style="margin-left: 24rpx;" :text="'金豆变化量：' + item.changeGoldenBeans" color="#66B8F2" border-color="#66B8F2" bg-color="#FFFFFF" size="mini" mode="plain" />
				</view>
				<view class="l-i-desc">
					金豆来源：{{typeText[item.dataType]}}
				</view>
				<view class="l-i-time">
					{{item.createDate}}
				</view>
			</view>
		</view>
		<u-loadmore v-show="tableData.length > 0" :status="status" />
		<u-empty v-show="tableData.length <= 0" style="margin-top:100rpx" text="暂时没有数据" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				page: 1,
				size: 10,
				total: 0,
				tableData: [],
				typeText: {
					1: '订单结算',
					2: '提现',
					3: '充值'
				},
				count: 0
			}
		},
		
		onShow() {
			this.status = 'loadmore';
			this.page = 1;
			this.size = 10;
			this.total = 0;
			this.tableData = [];
			this.getGoldenBeanTotal()
			this.getData()
		},
		methods: {
			toInfo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getGoldenBeanTotal() {
				this.$u.api.getGoldenBeanTotal().then(res => {
					if (res.code == 0) {
						this.count = res.data
					} else {
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			onReachBottom() {
				if(this.tableData.length >= this.total) return ;
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.getData()
					if(this.tableData.length >= this.total) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			getData() {
				this.$u.api.getGoldenBean({
					page: this.page,
					size: this.size,
				}).then(res => {
					if(res.code == 0) {
						if (res.data.list.length > 0) {
							this.tableData = [...this.tableData, ...res.data.list];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.extraInfo;
					} else {
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.top-total {
		padding: 45rpx 30rpx;
		font-size: 24rpx;
		color: #000000;
		.num {
			margin-top: 10rpx;
			font-size: 48rpx;
			font-weight: bold;
		}
		.to {
			margin-top: 10rpx;
			color: #999999;
		}
	}
	.list {
		padding: 0 30rpx;
	}
	.list-item {
		position: relative;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		padding: 20rpx 33rpx;
		height: 248rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(189, 189, 190, 0.6);
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.l-i-name {
		color: #333333;
		font-size: 30rpx;
	}
	.l-i-tag {
		color: #FFCD5F;
		border: 1rpx solid #FFCD5F;
	}
	.l-i-img {
		position: absolute;
		top: 17rpx;
		right: 17rpx;
		width: 24rpx;
		height: 31rpx;
	}
</style>
